<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>挂号统计</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="../../layuiadmin/layui/css/layui.css"
	media="all">
<link rel="stylesheet" href="../../layuiadmin/style/admin.css"
	media="all">
<link rel="stylesheet" href="../../layuiadmin/style/template.css"
	media="all">
<script src="../../js/echarts.min.js"></script>
</head>
<body>

	
	<div class="layui-fluid">
		<div class="layui-row layui-col-space15">
			<!-- 顶部统计开始 -->
			<div class="layui-col-sm6 layui-col-md3">
				<div class="layui-card">
					<div class="layui-card-header">
						今日目前挂号总人数 <span class="layui-badge layui-bg-blue layuiadmin-badge">日</span>
					</div>
					<div class="layui-card-body layuiadmin-card-list">
						<p class="layuiadmin-big-font">[[${todayRegisCount}]]</p>
						
					</div>
				</div>
			</div>
			<div class="layui-col-sm6 layui-col-md3">
				<div class="layui-card">
					<div class="layui-card-header">
						今日已完成就诊人数<span class="layui-badge layui-bg-cyan layuiadmin-badge">日</span>
					</div>
					<div class="layui-card-body layuiadmin-card-list">
						<p class="layuiadmin-big-font">[[${todayFinishOutpatient}]]</p>
						
					</div>
				</div>
			</div>
			<div class="layui-col-sm6 layui-col-md3">
				<div class="layui-card">
					<div class="layui-card-header">
						正在就诊人数<span class="layui-badge layui-bg-green layuiadmin-badge">日</span>
					</div>
					<div class="layui-card-body layuiadmin-card-list">

						<p class="layuiadmin-big-font">[[${outpatienting}]]</p>
						
					</div>
				</div>
			</div>
			<div class="layui-col-sm6 layui-col-md3">
				<div class="layui-card">
					<div class="layui-card-header">
						已挂号未缴费人数 <span class="layui-badge layui-bg-orange layuiadmin-badge">日</span>
					</div>
					<div class="layui-card-body layuiadmin-card-list">

						<p class="layuiadmin-big-font">[[${regisNotPay}]]</p>
						
					</div>
				</div>
			</div>
			<!-- 顶部统计结束 -->
			
			<!-- 底部图表开始 -->
			<div class="layui-col-sm12 layui-col-md6">
				<div class="layui-card">
				 <div class="layui-card-header">挂号数据概览</div>
              <div class="layui-card-body">
			<div id="regisChart" style="height: 450px; width: 550px" ></div>
			</div>
			</div>
			</div>
			
			<!-- 底部图表结束 -->
			
			<!-- 底部数据表格开始 -->
			<div class="layui-col-sm12 layui-col-md6">
				<div class="layui-card" >
			<div class="layui-card-header">今日挂号信息总览</div>
              <div class="layui-card-body">
                <div class="layui-tab-content">
                  <div class="layui-tab-item layui-show">
                   <table class="layui-hide" id="regisTable" lay-filter="regisTable" ></table>
                   <div style="display: none;" id="rightToolBar">
				<button class="layui-btn layui-btn-sm" type="button" lay-event="edit">详情</button>
			</div>
                  </div>
                </div>
              </div>
			
			</div>
			</div>
			<!-- 底部数据表格结束 -->
		</div>
	</div>
	
<input id="yesterdayRegisOffice" name="yesterdayRegisOffice" th:value="${yesterdayRegisOffice}" type="hidden"/>
<input id="todayRegisOffice" name="todayRegisOffice" th:value="${todayRegisOffice}" type="hidden"/>


	

	<script src="../../layuiadmin/layui/layui.js" charset="utf-8"></script>
	<script type="text/javascript">
		layui.use([ 'element', 'jquery', 'form', 'table'],function() {
					var $ = layui.jquery;
					var element = layui.element;
					var form = layui.form;
					var table = layui.table;
					
					table.render({
						elem : '#regisTable',
						url : '/regisInfo/todayRegisInfo',
						title : '今日挂号数据',
						height: '430',
						skin: 'row',
						even: true,//开启隔行背景
						page :false,
						cols : [ [

						{
							field : 'regisInfoId',
							title : '挂号ID',
							width : 100,
							fixed : 'left',
							align : 'center'
						},{
							field : 'patientId',
							title : '患者ID',
							width : 100
						},  {
							field : 'regisTypeId',
							title : '类型',
							width : 100
						}, {
							field : 'officeId',
							title : '科室ID',
							width : 80
						}, {
							field : 'regisDate',
							title : '日期',
							width : 80
						}, {
							field : 'payStatus',
							title : '付费状态',
							width:100
						}, {
							fixed : 'right',
							align : 'center',
							toolbar : '#rightToolBar'
						}

						] ]

					});
		});
	</script>
	<script type="text/javascript">
		//基于准备好的dom，初始化echarts实例
		var myChart = echarts.init(document.getElementById('regisChart'));
		//指定图表的配置项和数据
		var option = {
			    title: {
			        text: "不同科室的挂号数量",
			        
			    },
			    tooltip: {
			        trigger: "axis"
			    },
			    legend: {
			        data: ["昨日", "今日"]
			    },
			    toolbox: {
			        show: true,
			        feature: {
			            mark: {
			                show: true
			            },
			            dataView: {
			                show: true,
			                readOnly: true
			            },
			            magicType: {
			                show: true,
			                type: ["line", "bar"]
			            },
			            restore: {
			                show: false
			            },
			            saveAsImage: {
			                show: true
			            }
			        }
			    },
			    calculable: true,
			    xAxis: [
			        {
			            type: "category",
			            data: ["内科", "外科", "妇产科", "男科", "儿科", "五官科", "皮肤科", "传染科"]
			        }
			    ],
			    yAxis: [
			        {
			            type: "value",
			            name:"数量(个)",
			            max:"10"
			        }
			    ],
			    series: [
			        {
			            name: "昨日",
			            type: "bar",
			            data: function(){
			            	var arr = new Array();
			            	arr = document.getElementById("yesterdayRegisOffice").value.split(",");
			            	console.log(arr);
			            	return arr;
			            }()
			        },
			        {
			            name: "今日",
			            type: "bar",
			            data: function(){
			            	var arr = new Array();
			            	arr = document.getElementById("todayRegisOffice").value.split(",");
			            	console.log(arr);
			            	return arr;
			            }()
			        }
			    ]
			};
		//使用刚指定的配置项和数据限制图表
		myChart.setOption(option);
	</script>
</body>
</html>